<template>
	<div class="dialog">
    <div class="zt-dialog" :style="{width}">
      <div class="header-wrap">
        <div class="title">{{title}}</div>
        <div class="close">
				<span class="icon-guanbi lin close" @click="close"></span>
			</div>
      </div>
      <div class="content-wrap">
        <slot></slot>
      </div>
      <div class="footer">
        <slot name="footer"></slot>
      </div>
    </div>
    <div class="popContainer" v-if="visible"></div>
  </div>
</template>

<script>
import ZtButton from '../button/index'
export default {
  components:{
    ZtButton
  },
	props: {
		title: { type: String,default:'提示' },
		visible: { type: Boolean },
		width: { type: String,default:'50%' },
	},
  methods:{
    close(){
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="less" src="./index.less"></style>
